<title>权限</title>

<div class="layui-fluid">
    <div class="layui-btn-group">
        <button class="layui-btn" id="btn-expand">全部展开</button>
        <button class="layui-btn" id="btn-fold">全部折叠</button>
    </div>
    <table id="auth-list" class="layui-table ex-table" lay-filter="auth-list"></table>
</div>

<script type="text/html" id="auth-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm save" data-title="添加权限" data-url="/authority/save"> 添加权限 </button>
    </div>
</script>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs save" data-title="编辑权限" data-url="/authority/save" data-id='{{ d.id }}'>修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs delete" data-url="admin/authority/delete/id/{{ d.id }}">删除</a>
</script>

<script>
    layui.extend({
		treetable: 'lay-module/treetable-lay/treetable',
	}).use(['table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;

        // 渲染表格
        layer.load(2);
        treetable.render({
            treeColIndex: 1,
            treeSpid: 0,
            treeIdName: 'id',
            treePidName: 'pid',
            elem: '#auth-list',
            toolbar: '#auth-toolbar',
            url: layui.setter.API_HOST + '/admin/authority/datas',
            page: false,
            cols: [[
                {type: 'numbers'},
                {field: 'title', minWidth: 120, title: '权限名称'},
				{field: 'name', minWidth: 100, title: '标识'},
                {field: 'path', title: '接口地址'},
				{field: 'file_path', minWidth: 100, title: '模板地址'},
                {field: 'sort', width: 80, align: 'center', title: '排序号', edit: 'text'},
                {field: '', width: 80, align: 'center', title: 'icon', templet: function (d) {
                    if (d.icon)
                        return '<i class="'+ d.icon +'"></i>';
                    return '';
                }},
                {field: '', width: 80, align: 'center', title: '导航', templet: function (d) {
                        if (d.is_nav)
                            return '<i class="fa fa-check" style="color: green"></i>';
                        return '<i class="fa fa-times" style="color: black"></i>';
                    }},
                {field: '', width: 120, align: 'center', templet: function (d) {
                        if (d.pid === 0) {
                            return '<span class="layui-badge layui-bg-blue">一级导航</span>';
                        } else if (d.path === '') {
                            return '<span class="layui-badge layui-bg-cyan">二级导航</span>';
                        } else {
                            return '<span class="layui-badge-rim">菜单</span>';
                        }
                    }, title: '类型'
                },
                {templet: '#auth-state', width: 120, align: 'center', title: '操作'}
            ]],
            done: function (res) {
				console.log(res);
                layer.closeAll('loading');
            }
        });

        //监听单元格编辑
        table.on('edit(auth-list)', function(obj){
            $.ajax({
                type: 'post',
                url: layui.setter.API_HOST + '/admin/authority/save_sort',
                data: {
                    id: obj.data.id,
                    value: obj.value
                },
                dataType: 'json',
                success: function (res) {
                    if(res.code === 0) {
                        layer.msg(res.msg, {icon: 1, time: 1000}, function () {
                            treetable.reload('table');
                        });
                    } else {
                        layer.msg('修改失败', {icon: 5});
                    }
                }
            });
        });


        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        });
    });
</script>